<template>
    <div>
        <el-form>
            <el-form-itme label="兄弟组件Child发来消息：">
                <el-input v-model="msgFromChild"></el-input>
            </el-form-itme>
            <el-form-itme label="待办事项">
                <el-input v-model="text"></el-input>
            </el-form-itme>
            <el-form-itme>
                <el-button type="" @click="clearInput">清空</el-button>
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button type="danger" @click="$emit('removeAll')">重置清单</el-button>
            </el-form-itme>
        </el-form>
    </div>
</template>
  
<script>
//1.引入组件
import { ref,onMounted } from 'vue'
import bus from 'vue3-eventbus'

export default {
    name: 'ToDo',
    props: {
    },
    setup(props,cxt) {
        const text=ref("")
        const msgFormChild=ref("")
        const clearInput=function(){
            text.value=""
        }
        const submit=function(){
            cxt.emit('toList',text.value)
            text.value=""
        }
        onMounted(()=>{
            bus.on('getMsg',(value)=>{
                msgFormChild.value=value
            })
        })
        return {
            text,
            clearInput,
            submit,
            onMounted
        }
    }
}


</script>
  
<style></style>
  